<template>
  <div class="productdet">
    <van-nav-bar title="标题" left-text="返回" ight-text="按钮" left-arrow @click-left="onClickLeft" />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="img" v-lazy="image.img_url" />
      </van-swipe-item>
    </van-swipe>

    <div class="info">
      <span>30天无忧退货</span>
      <span>48个小时快速退款</span>
      <span>满88元免邮费</span>
    </div>

    <div class="proInfo" v-if="info">
      <h3 class="title">{{info.name}}</h3>
      <p class="brief">{{info.goods_brief}}</p>
      <p class="price">{{info.retail_price | filtermoneny}}</p>
    </div>

    <van-cell title="请选择规格数量" is-link />

    <div class="tel">
      <van-cell value="商品参数" />
      <van-cell-group v-for="(item,index) in attribute" :key="index">
        <van-field class="van-ellipsis" :label="item.name" :value="item.value" readonly />
      </van-cell-group>
    </div>

    <div class="proDetail" v-html="info.goods_desc">

    </div>

    <van-goods-action>
      <van-goods-action-icon to="/Buycart" :info="$store.state.cartTotal.goodsCount==0? '':$store.state.cartTotal.goodsCount" icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star-o" text="已收藏" />
      <van-goods-action-button type="warning" text="加入购物车" @click="chooseto" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 选择 商品规格-->

    <van-sku
    v-model="skushow"
    :sku="sku"
    :goods="goods"

    @buy-clicked="onBuyClicked"
    @add-cart="onAddCartClicked" />


  </div>
</template>
<script>
  import {
    GetDetailData,
    GetaddData
  } from '@/request/api'
  let sku = {
    // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
    // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
    tree: [],
    // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
    list: [{
      id: 2259, // skuId
      's-1': '1', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '3', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 10000, // 价格（单位分）
      stock_num: 130 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId
      's-1': '1', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '4', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 10000, // 价格（单位分）
      stock_num: 130 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId
      's-1': '1', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '5', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 10000, // 价格（单位分）
      stock_num: 130 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId
      's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '3', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 10000, // 价格（单位分）
      stock_num: 130 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId
      's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '4', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 10000, // 价格（单位分）
      stock_num: 130 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId
      's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '5', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 10000, // 价格（单位分）
      stock_num: 130 // 当前 sku 组合对应的库存
    }],
    price: '', // 默认价格（单位元）
    stock_num: 227, // 商品总库存
    collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
    none_sku: false, // 是否无规格商品
    hide_stock: false // 是否隐藏剩余库存
  }
  export default {
    data() {
      return {
        data: {},
        attribute: [],
        skushow: false,
        sku: sku,
        goods: {
          title: '',
          // 默认商品 sku 缩略图
          picture: ''
        },
        messageConfig: {
          // 数据结构见下方文档
        },
      }
    },
    created() {
      this.detail();
      this.$store.dispatch('AjaxCart')
    },
    methods: {
      detail() {
        GetDetailData({
          id: this.$route.query.id
        }).then(res => {
          if (res.errno == 0) {
            this.data = res.data;
            this.attribute = this.data.attribute;
            this.goods.picture = this.data.info.primary_pic_url;
            this.goods.title = this.data.info.name;
            this.sku.price = this.data.info.retail_price;
            this.sku.stock_num = this.data.info.goods_number;
            let tree = [];
            /* this.data.specificationList.forEach((item, index) => {
              this.valueList.forEach((product,i)=> {
                arr.push({
                  id: product.goods_id, // skuValueId：规格值 id
                  name: producu.value, // skuValueName：规格值名称
                })
              });
              tree.push({
                k: item.name, // skuKeyName：规格类目名称
                v:arr,
                k_s:item.specification_id
              })
            }); */
            this.data.specificationList.forEach((item,index) =>{
              let arr = [];
              item.valueList.forEach((product,i) => {
                arr.push({
                  id: product.id, // skuValueId：规格值 id
                  name: product.value, // skuValueName：规格值名称
                })
              });
              tree.push({
                k: item.name, // skuKeyName：规格类目名称
                v:arr,
                k_s:"s-"+item.specification_id
              })
            })
            console.log(tree);
            this.sku.tree = tree;
            console.log(this.sku.tree)
          }
        })
      },
      onClickLeft() {
        this.$router.go(-1)
      },
      //立即购买
      onBuyClicked() {

      },
      chooseto() {
        this.skushow = true;
      },
      //加入购物车
      onAddCartClicked(skuData) {
        //获取选中的商品，并且提交到后端
        this.skushow = false;
        let choseContent = skuData.selectedSkuComb['s-1']+'_'+skuData.selectedSkuComb['s-2']
        let resultPro =  this.data.productList.filter((item,index) =>{

          if(item.goods_specification_ids == choseContent){
            return true
          }else{
            return false
          }
        });
        GetaddData({
          goodsId:resultPro[0].goods_id,
          Number:skuData.selectedNum,
          productId:resultPro[0].id,
        }).then(res =>{
          this.$store.commit('setCartList',res.data.cartList)
          this.$store.commit('setCartTotal',res.data.cartTotal)
        })

      }
    },
    computed: {
      images: function() {
        return this.data.gallery
      },
      info: function() {
        if (this.data.info == undefined) {
          return []
        } else {
          console.log(this.data)
          return this.data.info
        }
      },
      spectList: function() {
        if (this.data.specificationList == undefined) {
          return []
        } else {
          return this.data.specificationList
        }
      }
    }
  }
</script>

<style lang="less">
  .productdet {
    .img {
      width: 100%;
    }

    .info {
      display: flex;
      justify-content: space-around;
      font-size: 12px;
      color: #999;
      height: 24px;
      line-height: 24px;
      background: #efefef;

      span {
        position: relative;
      }

      span::before {
        content: '';
        display: block;
        position: absolute;
        left: -10px;
        top: 10px;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        border: 1px solid red;
      }
    }

    .proInfo {
      text-align: center;

      .title {
        font-weight: 500;
        padding: 5px;
      }

      .brief {
        font-size: 12px;
        color: #999;
        padding: 3px;
      }

      .price {
        font-size: 16px;
        color: red;
        padding: 5px;
      }
    }

    .tel {
      .field {
        background: #F7F7F7;
        margin-bottom: 5px;
      }
    }

    .proDetail {
      padding-bottom: 20px;
      width: 100%;

      p {
        margin: 0;
        padding: 0;
        display: flex;

        img {
          width: 100%;
        }
      }
    }
  }
</style>
